<template>
    <div>
        <div style="width: 100%; height: 10px;"></div>
        <span style="font-weight:bold;color:black">比较示意图</span>
        <div style="width: 100%; height: 10px;"></div>
        <v-chart class="chart" :option="option" autoresize />
    </div>
</template>

<script setup>
import { use } from 'echarts/core';
import { TitleComponent, LegendComponent } from 'echarts/components';
import { RadarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { ref } from 'vue';

import VChart from "vue-echarts";

const props = defineProps({
  StuId: String
});

use([
    TitleComponent,
    LegendComponent,
    RadarChart,
    CanvasRenderer
]);

const average_learned_hour = ref(51988.97138157201 / 3600);
const average_loaded_day = ref((1629006913.0297432 - 1621973187.6592503) / 3600 / 24);
const average_score = ref(80.468663117844574);
const average_finishedTasks= ref(20.468663117844574);
const average_diversity= ref(3);

const stu_learned_hour = ref(101017 / 3600);
const stu_loaded_day = ref((1814400) / 3600 / 24);
const stu_score = ref(100);
const stu_finishedTasks= ref(40);
const stu_diversity= ref(5);

const option = ref({
    // color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    // title: {
    //     text: '比较示意图 ',
    //     textStyle: { color: 'black' }
    // },
    legend: {
        data: ['全站平均', '学生表现'],
        itemstyle: { color: 'black' },
    },
    radar: {
        // shape: 'circle',
        indicator: [
            { name: '学习时长', max: average_learned_hour.value*2.5, color: 'black' },
            { name: '学习成绩', max: average_score.value*2.5, color: 'black' },
            { name: '平均站龄', max: average_loaded_day.value*2.5, color: 'black' },
            { name:'完成任务数',max:average_finishedTasks.value*2.5,color:'black'},
            { name:'画像丰富度',max:average_diversity.value*2.5,color:'black'},
        ]
    },
    series: [
        {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
                {
                    value: [
                        average_learned_hour.value,
                        average_score.value,
                        average_loaded_day.value,
                        average_finishedTasks.value,
                        average_diversity.value,
                    ],
                    name: '全站平均',
                },
                {
                    value: [
                        stu_learned_hour.value,
                        stu_score.value,
                        stu_loaded_day.value,
                        stu_finishedTasks.value,
                        stu_diversity.value],
                    name: '学生表现'
                }
            ]
        }
    ]
});


</script>

<style scoped>
.chart {
    width: 100%;
    height: 400px;
    /* 设置合适的高度 */
}
</style>